<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css 伪类</title>
    <style type="text/css">

        /*
        伪类的语法：
        selector : pseudo-class {property: value}
        CSS 类也可与伪类搭配使用。

        selector.class : pseudo-class {property: value}
        */
        a:link {color: #FF0000}
        a:visited {color: #00FF00}
        a:hover {color: #FF00FF}
        a:active {color: #0000FF}

        a.one:link {color: #ff0000}
        a.one:visited {color: #0000ff}
        a.one:hover {color: #ffcc00}

        a.two:link {color: #ff0000}
        a.two:visited {color: #0000ff}
        a.two:hover {font-size: 150%}

        a.three:link {color: #ff0000}
        a.three:visited {color: #0000ff}
        a.three:hover {background: #66ff66}

        a.four:link {color: #ff0000}
        a.four:visited {color: #0000ff}
        a.four:hover {font-family: monospace}

        a.five:link {color: #ff0000; text-decoration: none}
        a.five:visited {color: #0000ff; text-decoration: none}
        a.five:hover {text-decoration: underline}

        input:focus
        {
            background-color: yellow;
        }

        p:first-child {  /* 选择元素的第一个子元素*/
            font-weight: bold;
        }

        li:first-child{
            text-transform: uppercase;
        }
        /* lang 伪类 */
        q:lang(no){
            quotes: "~" "~";
        }

        /*锚伪类*/
        /*
        a:link {color: #FF0000}		未访问的链接
        a:visited {color: #00FF00}	已访问的链接
        a:hover {color: #FF00FF}	鼠标移动到链接上
        a:active {color: #0000FF}	选定的链接
         */
        p > i:first-child{  /*  p 的所有 为i 的子元素 中的第一个 */
            font-weight: bold;
        }

        /*
        :active	向被激活的元素添加样式。
        :focus	向拥有键盘输入焦点的元素添加样式。
        :hover	当鼠标悬浮在元素上方时，向元素添加样式。
        :link	向未被访问的链接添加样式。
        :visited	向已被访问的链接添加样式。
        :first-child	向元素的第一个子元素添加样式。
        :lang	向带有指定 lang 属性的元素添加样式。
        */

    </style>
</head>
<body>
    <p><b><a href="/index.html" target="_blank">这是一个链接。</a></b></p>
    <p><b>注释：</b>在 CSS 定义中，a:hover 必须位于 a:link 和 a:visited 之后，这样才能生效！</p>
    <p><b>注释：</b>在 CSS 定义中，a:active 必须位于 a:hover 之后，这样才能生效！</p>

    <p>请把鼠标移动到这些链接上，以查看效果：</p>

    <p><b><a class="one" href="/index.html" target="_blank">这个链接改变颜色</a></b></p>
    <p><b><a class="two" href="/index.html" target="_blank">这个链接改变字体大小</a></b></p>
    <p><b><a class="three" href="/index.html" target="_blank">这个链接改变背景颜色</a></b></p>
    <p><b><a class="four" href="/index.html" target="_blank">这个链接改变字体系列</a></b></p>
    <p><b><a class="five" href="/index.html" target="_blank">这个链接改变文本装饰</a></b></p>

    <p>请输入相关的文字 查看背景发生的变化 </p>
    <form action="form_action_asp" method="get">
        First name: <input type="text" name="fname"/> <br/>
        Last name: <input type="text" name="lname"/> <br/>
        <input type="submit" value="Submit"/>
    </form>

    <p>下面这些 是 必要的步骤 </p>
    <ul>
        <li>Intert Key</li>
        <li>Turn key <strong>clockwise</strong></li>
        <li>Push accelerator</li>
    </ul>
    <p>Do <em>not</em> push the brake at the same time as the accelerator.</p>
    </div>
    <p><b>注释：</b>必须声明 DOCTYPE，这样 :first-child 才能在 IE 中生效。</p>

    <!-- 测试 quotes的类型 -->
    <p>
        :lang 伪类允许您为不同的语言定义特殊的规则。在下面的例子中，在下面的例子中，
        :lang 类为带有值为 "no" 的 lang 属性的 q 元素定义引号的类型：
    </p>
    <p>一些文本<q lang="no">段落当着的引用</q>一些文本</p>  <!--  这样不用每次要 ~ 的时候 都写 只需要写个 lang = no -->
    <p>some <i>第一串文字才能被匹配</i>. some <i>text</i>.</p>
    <p>some <i>第一串文字才能被匹配</i>. some <i>text</i>.</p>

</body>
</body>
</body>
</html>